<template>
  <div class="notice-panel">
    <el-badge :value="num" :max="99" class="item" type="danger">
      <div class="badge" @click="jumpMessage">
        <i class="icon el-icon-message-solid"></i>
        <span class="isMessage" v-show="isMessage"></span>
      </div>
    </el-badge>

    <div class="badge" @click="jumpTodo">
      <i class="icon el-icon-s-claim"></i>
      <span class="isMessage" v-show="isMessage"></span>
    </div>
  </div>
</template>

<script>
import Notice from '@/pages/notice/index';
import { getNoticePanel, putMsgRecord } from '@/api/login/index';
import { getNoticeData } from '@/api/common/notice/noticemanage/noticesee/';
import { mapGetters, mapActions } from 'vuex';
export default {
  name: 'NoticePanel',
  data() {
    return {
      isMessage: false,
      timer: null,
      isOnline: localStorage.getItem('isOnline'),
    };
  },
  components: {
    Notice
  },
  mounted() {
    this.getNotice();
  },
  computed: {
    ...mapGetters('noticePanel', ['num']),
  },
  methods: {
    getNotice() {
      if (this.isOnline == 1) {
        //console.log('第一次登陆');
        localStorage.setItem('isOnline', 2);
      } else {
        //console.log('在线状态');
      }
      getNoticePanel().then(res => {
        // 10651001未看
        //console.log(res, '10651001未看');
        let noReadNum = 0;
        res.data.records.forEach(x => {
          if (x.msgStatus == 10651001) {
            noReadNum++;
            this.isMessage = true;
          } else {
            this.isMessage = false;
          }
        });
        console.log(noReadNum, 'noReadNum');
      }),
        getNoticeData(this.fetchParams).then(res => {
          // console.log(res.data,"123")
          // 10651001
          if (res.data.records[0] && res.data.records[0].msgStatus && res.data.records[0].msgStatus == 10651001) {
            this.open2(res.data.records[0].msgContent);
          }
        });
      // this.open1('我是一我是一段通知我是一段通知我是一段通知一知我是一段通知段通知123456')
      // this.open2('我是一我是一段通知我是一段通知我是一段通知一知我是一段通知段通知123456')
    },
    // 定时任务
    setIntr() {
      let that = this;
      // 定时关闭
      clearInterval(this.timer);
      this.timer = setInterval(function () {
        that.getNotice();
      }, 1000 * 60);
    },
    jump() {
      if (this.isMessage == true) {
        this.$router.push({ path: '/admin/notice/noticemanage' });
        putMsgRecord();
        this.isMessage = false;
      }
    },

    jumpMessage() {
      this.$router.push({ path: '/todoTask/Message/index' });
      // if(this.isMessage == true){

      //  this.$router.push({path:'/notification/view/index'})

      //   putMsgRecord()
      //   this.isMessage =false
      // }
    },
    jumpTodo() {
      this.$router.push({ path: '/todoTask/todo/index' });
      // if(this.isMessage == true){

      //  this.$router.push({path:'/notification/view/index'})

      //   putMsgRecord()
      //   this.isMessage =false
      // }
    },

    // 通知
    // 无需手动确认的通知
    // open1(msg) {
    //     this.instance=this.$notify({
    //       title: '提示',
    //       message: `${msg}`
    //     });

    //   },
    // 需要手动确认的通知
    open2(msg) {
      this.instance = this.$notify({
        title: '提示',
        // duration:0,若需要手动关闭则打开这个
        dangerouslyUseHTMLString: true,
        onClick: this.btn,
        // message: `<div>${msg}</div><p class="btn" >知道了</p>`
        message: `<div style="cursor:pointer">${msg}</div></p>`
      });
    },
    // 通知手动关闭
    btn() {
      //this.$router.push({ path: '/admin/notice/noticemanage' });
      this.instance.close();
    }
  }
};
</script>

<style lang="less">
.notice-panel {
  .badge {
    position: relative;
    display: inline;
    .el-badge__content {
      right: 15px;
      top: 5px;
      transform: translateY(-50%) translateX(100%) scale(0.9);
    }
  }
  .el-badge {
    margin:0 10px 0 5px;
    vertical-align:baseline;
  }
  .icon {
    font-size: 24px;
    padding: 2px;
    cursor: pointer;
    color: @primaryColor;
  }
  .isMessage {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
